<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            height: 500px;
            background: black;
            position: relative;
        }
        input{
            width: 300px;
            height: 50px;
            font-size: 30px;
        }
        button{
            background: green;
            width: 150px;
            height: 50px;
        }
        button:hover{
            background: darkcyan;
        }
        .dm{
            color: red;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <input type="text" id="text">
    <button>吐槽一下</button>
    <script>
        let box = document.getElementById("box")
        let text = document.getElementById("text")
        let btn = document.querySelector("button")

        btn.onclick = function(){
            // let span = document.createElement("span")
            let dM = new Span(box,text.value)
            console.log(text);
            dM.renDer()
            dM.upTree()
            setInterval(function(){
                dM.move()
            },20)
        }
        
        function Span(box,text){
            this.box = box
            this.dom = document.createElement("span")
            this.text = text
        }
        Span.prototype.renDer = function(){
            this.dom.innerHTML = this.text
            this.dom.style.color = "red"
            this.dom.style.display = "block"
            this.dom.style.width = "500px"
            this.dom.style.fontSize = "20px"
            this.dom.style.position = "absolute"
            this.dom.style.left = `100%`
            this.dom.style.top = `${parseInt(Math.random() * (this.box.clientHeight - 25))}px`
        }
        Span.prototype.upTree  = function(){
            box.appendChild(this.dom)
        }
        Span.prototype.move = function(){
            if(this.dom.offsetLeft > -this.dom.clientWidth){
                this.dom.style.left = this.dom.offsetLeft - 5 + "px"
            }else{
                this.dom.remove()
            }
        }
    </script>
</body>
</html>